<template>
  <div class='songs-list-content mt30'>
    <div class="songs-list-thead">
      <i class='fs20 songs-title'>包含歌曲列表</i>
      <i class='songs-num fs10 fcgray ml20'>{{songListData.length}}首歌</i>
    </div>
    <div class="songs-list-tbody fs12">
      <template>
        <el-table
         @cell-mouse-enter="hoverRow"
         @cell-mouse-leave="leaveRow"
          :data="songListData"
          :key='timeStamp'
          stripe
          style="width: 100%; font-size: 12px;">
          <!-- 序号 -->
          <el-table-column
            prop="songIndex"
            label=""
            width="40">
          </el-table-column>
          <!-- 播放图标 -->
          <el-table-column
            label=""
            width="50">
            <template slot-scope="scope">
              <span class="play-icon disinblock cursor-pointer" @click='playSong(scope.$index, scope.row)'></span>
            </template>
          </el-table-column>
          <!-- 歌曲标题 -->
          <el-table-column
            prop="name"
            label="歌曲标题"
            width="320">
            <template scope="scope">
              <span class="album-songs space-nowrap cursor-pointer" :title="scope.row.name">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <!-- 时长 -->
          <el-table-column
            prop="times"
            label="时长"
            width="120">
            <template scope="scope">
              <span class="times-column">
              <ul class='icon-list mt5' v-show='scope.row.howBtnOp'>
                  <li class='fl mr5 icon icon-add' title='添加'></li>
                  <li class='fl mr5 icon icon-collect' title='收藏'></li>
                  <li class='fl mr5 icon icon-share' title='分享'></li>
                  <li class='fl mr5 icon icon-download' title='下载'></li>
                </ul>
                <span class='times-content' v-show='!scope.row.howBtnOp'>
                  {{ scope.row.times }}
                </span>
              </span>
            </template>
          </el-table-column>
          <!-- 歌手 -->
          <el-table-column
            prop="singer"
            label="歌手"
            width="">
            <template scope="scope">
              <span class="album-songs space-nowrap cursor-pointer" :title="scope.row.singer">
                {{ scope.row.singer }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import utils from '@/utils/common'
export default {
  name: 'albumSongs',
  props: ['albumContent'],
  data() {
    return {
      songListData: [{
        songIndex: '',
        name: '',
        times: '',
        singer: '',
        howBtnOp: ''
      }],
      timeStamp: '',
      songIds: '',
      albumContentData: {}
    }
  },
  watch: {
    albumContent() {
      this.updateData()
    }
  },
  methods: {
    updateData() {
      this.timeStamp = new Date().valueOf()
      this.albumContentData  = this.albumContent
      this.songListData = JSON.parse(JSON.stringify(this.albumContentData.songs))
      // 渲染歌单表格
      this.albumContentData.songs.forEach((item, i) => {
        let author = []
        item.ar.forEach(item => {
          author.push(item.name)
        })
        this.songListData[i].songIndex = i + 1
        this.songListData[i].times = utils.secondsFormat2(item.dt)
        this.songListData[i].singer = author.join('/')
        // this.songListData[i] = {
        //   id: i + 1,
        //   name: item.name,
        //   times: utils.secondsFormat2(item.dt),
        //   singer: author.join('/'),
        // }
      })
    },
    hoverRow(row) {
      row.howBtnOp = true;
      this.$set(this.songListData, row.index, row);
    },
    leaveRow(row) {
      row.howBtnOp = false;
      this.$set(this.songListData, row.index, row);
    },
    playSong(index, row) {
      store.dispatch('song/judgeMusic', row.id)
    }
  }
}
</script>

<style scoped lang='less'>
  .songs-list-content {
    width: 100%;
    height: auto;
    .songs-list-thead {
        height: 30px;
        line-height: 30px;
        padding-bottom: 5px;
        border-bottom: 2px solid #c20c0c;
        .play-count {
          color: #c20c0c;
        }
    }
    .songs-list-tbody {
      /deep/.el-table th {
        background: #f8f8f8;
        border: 1px solid #eaeaea;
      }
      /deep/.el-table td, .el-table th {
        padding: 5px 0;
      }
      .play-icon {
        width: 17px;
        height: 17px;
        margin-top: 5px;
        background: url('../../assets/table.png');
        background-position: 0px -103px;
        &:hover {
          background-position: 0px -128px;
        }
      }
      .album-songs {
        &:hover {
          text-decoration: underline;
        }
      }
      .times-column {
        .icon-list {
          width: 100%;
          height: 16px;
          .icon {
            width: 19px;
            height: 16px;
            background: url("../../assets/table.png");
          }
          .icon-add {
            width: 17px;
            background: url("../../assets/icon.png");
            background-position: 0px -698px;
            &:hover {
              background-position: -22px -698px;
            }
          }
          .icon-collect {
            background-position: 0px 198px;
            &:hover {
              background-position: -20px 198px;
            }
          }
          .icon-share {
            background-position: 0px 177px;
            &:hover {
              background-position: -20px 177px;
            }
          }
          .icon-download {
            background-position: -80px 198px;
            &:hover {
              background-position: -103px 198px;
            }
          }
        }
      }
    }
  }
</style>